<template>
    <el-form class="search-form" inline :model="searchDataForm" ref="searchFormRef" :rules="rules">
      <el-form-item size="mini" label="账号">
        <el-input v-model="searchDataForm.username" placeholder="账号" />
      </el-form-item>
      <el-form-item size="mini" label="姓名">
        <el-input  v-model="searchDataForm.realname" placeholder="姓名" />
      </el-form-item>
      <el-form-item size="mini" label="性别">
        <el-radio-group v-model="searchDataForm.sex">
          <el-radio label="1">先生</el-radio>
          <el-radio label="2">女士</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item size="mini" label="手机号" prop="phone">
        <el-input v-model="searchDataForm.phone" placeholder="手机号" />
      </el-form-item>
      <el-form-item size="mini" label="生日">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="searchDataForm.birthday"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="onSubmit">查询数据</el-button>
        <!-- <a download="用户列表数据.xlsx" href="http://localhost:5000/users.xlsx">下载全部用户数据</a> -->
      <el-button type="success" @click="downloadUserExcel">下载全部用户数据</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script>
import { noEmptySearchObject } from '@/utils/tools'
import { exportUsersExcelApi } from '@/api/userApi'

  export default {
  props: ['page', 'loadData'],
    data() {
      return {
        searchDataForm: {
          username: '',
          realname: '',
          sex: '',
          phone: '',
          birthday: ''
        },
        rules: {
          phone: [
            {
              validator: this.validatorPhone,
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      validatorPhone(rule, value, callback) {
        if (value) {
          if (/^1[3-9]\d{9}$/.test(value)) {
            callback()
          } else {
            callback(new Error('手机号不合法'))
          }
        } else {
          callback()
        }
      },
      onSubmit() {
        this.$refs.searchFormRef.validate(valid => {
          if (valid) {
            // 验证通过，将表单中填写的项赋值给searchObj
           let searchObj= noEmptySearchObject(this.searchDataForm)
           //将传入的page作为参数赋值给query
           let query ={page:this.page}
          //  如果搜索区域填写了内容
           if(searchObj){
            // 使用对象扩展语法，将searchObj中的键值对合并到query对象中
            query ={page:this.page,...searchObj}
           }
          //  replace({ query })：是this.$router对象的一个方法
          // 用于替换当前路由的URL，并更新URL中的查询参数。
          // 它接收一个包含查询参数的对象作为参数
           this.$router.replace({query})
           this.loadData(this.page,searchObj)
          }
        })
      },
    // 下载全部用户数据excel文件
      async downloadUserExcel(){
        let ret=await exportUsersExcelApi()
        //请求成功
        if(ret.code===0){
          //创建a标签dom
          const aDom=document.createElement('a')
          // 设置a标签中herf属性为返回的et.data
          aDom.href=ret.data
          aDom.download=true
          aDom.click()
          setTimeout(() => {
          aDom.remove()
        }, 100)
        }
      },
    }
  }
  </script>
  
  <style  scoped>
  .search-form {
    background: #fff;
    padding: 10px;
    margin-top: 5px;
  }
  </style>
  